<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品展示</title>

    <style type="text/css">
        body,p, h3{
            margin: 0px;
        }
        a {
            text-decoration: none;
            border: 1px solid red; 
            display: block; /*a标签是行内元素，行内元素放块级元素会有问题 转为块级元素*/
        }

        .product {
            width: 268px;
            /* height: 500px; */
            /* background-color: aqua; */
            margin: 50px auto 0px;
            border: 1px solid #ddd;
            text-align: center; /* 水平方向居中 */
        }

        .product p.describe {
            /* border: 1px solid #ddd; */
            color: #845f3f;
            font-size: 16px;
        }

        .product .product-text {
            /* height: 100px; */
            background-color: #f8f8f8;
            margin-top: 20px;
            padding: 15px;
        }

        .product .product-text .product-mark {
            font-size: 0px; /* 消除图片因换行产生的间隙 */
        }

        .product .product-text .product-mark img {
            margin: 0px 2px;
        }

        .product .product-text h3 {
            font-size: 20px;
            font-weight: 400;
            margin-top: 15px;
            color: #000;
        }

        .product .product-text p {
            color: #a92112;
            font-size: 20px;
            margin-top: 5px;
        }
    </style>

</head>
<body>
    <div class="product">
        <a href="">
            <img src="./images/bottle.png" alt="" width="195px">
            <p class="describe">快速煮水，安心饮用</p>
            <div class="product-text">
                <div class="product-mark">
                    <img src="images/product-tag-1.png" alt="" height="20px">
                    <img src="images/product-tag-2.png" alt="" height="20px">
                    <img src="images/product-tag-3.png" alt="" height="20px">
                    <img src="images/product-tag-4.png" alt="" height="20px">
                </div> 
                <h3>云米电水壶</h3>
                <p>$59</p>
            </div>
        </a>
    </div>
    
</body>
</html>